<template>
    <view class="app-container order">
        <zzk-nav title="换货发货"></zzk-nav>
        <view class="order-box">
            <view class="order-block">
                <view class="line flexrow">
                    <image class="avatar" :src="order.clientAvatar" mode="aspectFill"></image>
                    <text class="txt value">{{ order.clientNickName }}</text>
                </view>
                <view class="order-flex flexrow">
                    <view class="imgbox">
                        <image class="img" :src="order.pictureOssPath" mode="aspectFill"></image>
                    </view>
                    <view class="text">
                        <view class="line flexrow">
                            <text class="txt label">租/售：</text>
                            <text class="txt value">{{ order.orderType === 'BUY' ? '售' : '租' }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">商品名称：</text>
                            <text class="txt value">{{ order.goodsName }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">可发货数量：</text>
                            <text class="txt value">{{ max }}</text>
                        </view>
                        <view class="line flexrow">
                            <text class="txt label">订单状态：</text>
                            <text class="tag">{{ payStatus[order.payStatus] }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 待发货 -->
            <view class="order-block">
                <view class="order-line flexrow" @tap="showLog = true">
                    <text class="label">发货方式</text>
                    <text class="value">{{ logisticsType[logistics].name }}</text>
                    <uni-icons type="right" size="20" color="#999"></uni-icons>
                </view>
                <template v-if="logisticsType[logistics].value === 'LOGISTICS'">
                    <view class="order-input flexrow">
                        <view>
                            <text class="label">物流公司</text>
                        </view>
                        <view class="input">
                            <up-input v-model="sendGoods.logisticsCompany" placeholder="请输入物流公司" fontSize="14" border="none" clearable></up-input>
                        </view>
                    </view>
                    <view class="order-input flexrow">
                        <view>
                            <text class="label">物流单号</text>
                        </view>
                        <view class="input">
                            <up-input v-model="sendGoods.logisticsNo" placeholder="请输入物流单号" fontSize="14" border="none" clearable></up-input>
                        </view>
                    </view>
                </template>
            </view>
            <view class="order-block">
                <view class="order-input flexrow">
                    <view>
                        <text class="label">发货数量</text>
                    </view>
                    <view class="input">
                        <up-input v-model="sendGoods.quantity" placeholder="请输入发货数量" type="number" fontSize="14" border="none" clearable>
                            <template #suffix>
                                <text class="unit">个/台</text>
                            </template>
                        </up-input>
                    </view>
                </view>
            </view>
        </view>
        <!-- 待发货 -->
        <zzk-bottom>
            <view class="order-bottom flexrow">
                <view class="num">
                    <text class="txt">数量：{{ sendGoods.quantity || 0 }}</text>
                </view>
                <up-button text="确认发货" type="error" :customStyle="{ margin: 0, width: '160rpx', height: '72rpx' }" :loading="loading" @click="toDeliver"></up-button>
            </view>
        </zzk-bottom>
        <up-picker :show="showLog" :columns="[logisticsType]" keyName="name" @cancel="showLog = false" @confirm="getLogistics"></up-picker>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderInfo, orderDeliver } from '@/api/order.js'
import { payStatus } from '@/utils/status'
import { showToast, backpage } from '@/utils/util'

const id = ref('')
const type = ref('')
const order = ref({})
const loading = ref(false)
const max = ref(0)

// 配送方式
const logisticsType = ref([
    { name: '商家配送上门', value: 'MERCHANT_SEND' },
    { name: '客户自提', value: 'CLIENT_SELF_PICKUP' },
    { name: '物流快递', value: 'LOGISTICS' }
])
const logistics = ref(0)
const showLog = ref(false)

// 发货参数
const sendGoods = ref({
    applyId: '',
    logisticsCompany: '',
    logisticsNo: '',
    quantity: '',
    logisticsType: ''
})

onLoad((option) => {
    id.value = option.id
    if (option.type) {
        type.value = option.type
    }
    if (option.num) {
        max.value = Number(option.num)
    }
    if (option.applyId) {
        sendGoods.value.applyId = option.applyId
    }
    console.log(option)
    getInfo()
})

const getInfo = () => {
    orderInfo(id.value).then(res => {
        order.value = res
    })
}

const getLogistics = (e) => {
    logistics.value = e.indexs[0]
    showLog.value = false
}

const toDeliver = () => {
    const data = {}
    let reg = /^(0|[1-9]\d*)$/
    if (!reg.test(sendGoods.value.quantity)) {
        showToast('请输入正确的数量')
        return false
    } else if (Number(sendGoods.value.quantity) > max.value) {
        showToast(`最大可发货数量为${max.value}`)
        return false
    } else if (logisticsType.value[logistics.value].value === 'LOGISTICS') {
        if (sendGoods.value.logisticsCompany === '') {
            showToast('请输入物流公司')
            return false
        } else if (sendGoods.value.logisticsNo === '') {
            showToast('请输入物流单号')
            return false
        }
        data.logisticsCompany = sendGoods.value.logisticsCompany
        data.logisticsNo = sendGoods.value.logisticsNo
    }
    data.logisticsType = logisticsType.value[logistics.value].value
    data.orderId = id.value
    data.quantity = sendGoods.value.quantity
    data.type = 'CLIENT_EXCHANGE_FROM_MERCHANT'
    data.applyId = sendGoods.value.applyId
    
    loading.value = true
    orderDeliver(data).then(res => {
        loading.value
        uni.$emit('refresh_order')
        showToast('发货成功', () => {
            backpage()
        })
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.order {
    &-box {
        padding: 20rpx $zzk-margin 0;
    }
    &-block {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;
        .avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 16rpx;
        }
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
            &.label {
                color: #999;
            }
        }
        .tag {
            font-size: 24rpx;
            line-height: 48rpx;
            padding: 0 8rpx;
            background-color: $u-info-light;
            color: $u-info;
            border-radius: 4rpx;
        }
    }
    &-flex {
        padding-top: 20rpx;
        .img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            display: block;
        }
        .text {
            flex: 1;
            padding-left: 20rpx;
        }
    }
    &-line {
        align-items: center;
        height: 80rpx;
        .label {
            font-size: 28rpx;
            flex: 1;
            color: #999;
            line-height: 40rpx;
        }
        .value {
            font-size: 28rpx;
            line-height: 40rpx;
            &.red {
                color: $u-error;
            }
        }
    }
    &-input {
        align-items: center;
        height: 80rpx;
        .label {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
            width: 140rpx;
        }
        .input {
            flex: 1;
        }
        .unit {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #999;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        justify-content: flex-end;
        align-items: center;
        .txt {
            font-size: 28rpx;
            color: #333;
            padding-right: 20rpx;
        }
    }
}
</style>